<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/simple-nav :: nav}">
</head>

<link href="../../css/custom/blog-article-display.css" th:href="@{/css/custom/blog-article-display.css}" rel="stylesheet">
<body>
<!-- Page Content -->
<div class="container blog-content-container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div id="mainContainer">
                        <!--博客列表-->
                        <div id="mainContainerRepleace">
                            <h5 class="card-header" th:text="${user.username}+'~'+${blogListTitle}"></h5>
                            <div class="card mb-4" th:each="blog : ${blogList}">
                                <div class="card-block">
                                    <div class="avatar-box-sm">
                                        <img class="avatar-photo" th:src="${blog.user.headUrl}" />
                                    </div>
                                    <div class="blog-title-box">
                                        <a href="/space/xuef1991/blogs/1" class="card-link" title="xuef1991"
                                           th:href="'/space/' + ${blog.user.username} + '/blogs/'+ ${blog.id}"
                                           th:title="${blog.user.username}" th:text="${blog.title}">
                                            title
                                        </a>
                                        <p class="card-text blog-summary" th:text="${blog.summary}">
                                            summary
                                        </p>
                                    </div>
                                    <div class="card-text">
                                        ~<a th:href="'/space/' + ${blog.user.username} + '/blogs/'">
                                            <span th:text="${blog.user.username}"></span>
                                        </a>
                                        ~[[${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}]]
                                        <span class="blog-summary">阅读:</span>[[${blog.readCount}]]
                                        <span class="blog-summary">喜欢:</span>[[${blog.likeCount}]]
                                        <span class="blog-summary">评论:</span>[[${blog.commentCount}]]
                                    </div>
                                </div>
                            </div>
                            <div th:replace="~{fragments/page :: page}">...</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 右侧栏 -->
        <div class="col-md-4">
            <div class="card text-left">
                <h5 class="card-header">
                    博主
                </h5>
                <div class="card-body">
                    <div class="avatar-box-md" id="user-avatar">
                        <img class="avatar-photo" id="avatar" th:src="${user.headUrl}" />
                    </div>
                    <div class="about-user-box">
                        <button type="button" class="btn btn-sm btn-light" data-toggle="modal" th:if="${isBlogOwner}"
                                data-target="#upload_avatar">
                            修改头像
                        </button>
                        <a th:href="'/space/'+${user.username}"><h3 th:text="'~'+${user.username}"></h3></a>
                        <a href="javascript:void(0)" id="getLikedBlogs">~喜欢的文章</a>
                    </div>
                </div>
            </div>
            </br>
            <div class="card text-left">
                <h5 class="card-header">
                    搜索
                </h5>
                <div class="card-body">
                    <input class="form-control mr-sm-2" id="search-keyword" type="text" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success col-md-12 my-2 my-sm-0" type="submit" id="search4an-user">Search</button>
                </div>
            </div>
            </br>
            <div class="card text-left" id="catalogMain">
                <div class="card-body" id="catalogReplace">
                    <h5 class="card-header">
					<i class="fa fa-bars" aria-hidden="true"></i> 分类
					<a href="javascript:void(0)" th:if="${isCatalogsOwner}" th:text="add"
					   class="blog-add-catalog blog-right" data-toggle="modal"
                       data-target="#flipFlop" role="button">
					添加</a>
				</h5>
                    <ul class="list-group" th:each="catalog : ${catalogs}" th:object="${catalog}">
                        <div class="blog-list-group-item">
                            <a href="javascript:void(0)" th:attr="catalogid=*{id}" class="blog-query-by-catalog">
                                [[*{name}]]
                            </a>
                            <span class="blog-right">
                                <a href="javascript:void(0)" th:if="${isCatalogsOwner}" th:text="edit"
                                   class="blog-edit-catalog" data-toggle="modal"
                                   data-target="#flipFlop" role="button" th:attr="catalogid=*{id}">
                                </a>
                                <a href="javascript:void(0)" th:if="${isCatalogsOwner}" th:text="del"
                                   class="blog-delete-catalog" th:attr="catalogid=*{id}">
                                    </a>
                            </span>
                        </div>
                    </ul>
                </div>
            </div>
            </br>
            <div class="card text-left">
                <div class="card-header">
                    标签
                </div>
                <div class="card-body">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-lg-12" >
                                <a th:each="tag, tagStat : ${tags}" th:object="${tag}"
                                   href="javascript:void(0)" th:attr="tagName=*{name}" class="blog-query-by-tag"
                                    <!--此处只是彩色了前三个标签-->
                                    <span class="badge" th:classappend="${tagStat.index} eq 0 ? 'badge-danger':
                                (${tagStat.index} eq 1 ? 'badge-warning':(${tagStat.index} eq 2 ? 'badge-success':'badge-default'))"th:text="*{name}">vim</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </br>
            <div class="card text-left">
                <div class="card-header">
                    归档
                </div>
                <div class="card-body">
                    <div class="blog-list-group-item" th:each="tdoc:${timeDoc}" th:object="${tdoc}">
                        <a  href="#" th:href="'/space/'+ ${user.username} +'/blogs?keyword=' + *{yearMonth} + '&type=yymm'">
                            <span th:text="*{yearMonth} + '  (- ' + *{count} + ' -)'">nil</span>
                        </a>
                    </div>
                </div>
            </div>
            <br/>
        </div>
    </div>

</div>

<div class="modal fade" id="upload_avatar" tabindex="-1" role="dialog"
     aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改头像</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form th:action="'/space/'+${user.username} + '/avatar'" method="post" id="avatar-upload-form" enctype="multipart/form-data">
                <div class="modal-body">
                    <span name="username" th:value="${user.username}"></span>
                    <input type="file" name="file" id="uploadAvatar" class="btn btn-sm btn-light" />
                </div>
                <div class="modal-footer">
                    <button type="button" id="avatar-submit" class="btn btn-primary">上传</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /.container -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog"
     aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLabel">新增/编辑</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="catalogFormContainer"></div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" id="submitEditCatalog">提交</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>

<!-- JavaScript -->
<script th:inline="javascript">
        // 高亮当前tab标签
        $(function () {
            // 必须使用 +"" 把url转为string类型，不然就是object类型，没有indexOf方法
            var url = window.location + "";
            var tmp = $("#my").attr("href");
            //alert(typeof url);
            var seps = url.split("/");
            // 从地址栏地址中析取 请求的博客主页 用户名
            var url_name = seps[seps.length-2];
            if(url.indexOf(tmp) == -1){
                $("#blogs-list").addClass("active");
            }else{
                if(tmp+"" == "/space/"+url_name) {
                    $("#my-blogs-list").addClass("active");
                }
            }
        });
    var username = [[${user.username}]];
    var catalogId = [[${catalogId}]];

    $(function () {
        // 上传头像
        $("#avatar-submit").click(function () {
            $('#avatar-upload-form').ajaxSubmit({
                success: function (responseMsg) {
                    if(responseMsg.success){
                        toastr.info(responseMsg.message);
                        $("#upload_avatar").modal("hide");
                        $("#avatar").attr("src", responseMsg.obj);
                    }else{
                        toastr.error(responseMsg.message);
                    }
                }
            });
        });
    });
</script>
<script src="../../js/userspace/u.js" th:src="@{/js/userspace/u.js}"></script>
</body>
</html>